<template>
	<view class="content">
		<view class="main">
			<u-icon class="u-icon" name="arrow-left" color="#fff" size="18" @click='back'></u-icon>
			<view class="maina">
				<span>{{date}} 周二</span>
				<span>{{hours}}时{{minute}}分</span>
				<span>{{date}} 周二</span>
			</view>
			<view class="mainb">
				<span>{{dates<10? '0'+dates:dates}}:{{datev<10? '0'+datev:datev}}</span>
				<span>时刻表</span>
				<span>{{dates1<10? '0'+dates1:dates1}}:{{datev1<10? '0'+datev1:datev1}}</span>
			</view>
			<view class="mainc">
				<view class="maincone">
					{{city}}
				</view>
				<view class="mainT">
					<p>G{{ceci}}</p>
				</view>
				<view class="mainctwo">
					{{citytwo}}
				</view>
			</view>
			<p class="mainz">二等座 ￥{{money}}</p>
		</view>
		<view class="main_b" @click="tiaozhuan">
			<view class="top">
				<span class="top_a">{{name}}</span>
				<span class="top_b">{{arr}}</span>
			</view>
			<view class="mid" @click="sfz">
				<span class="mid_a">身份证</span>
				<span class="mid_b">{{number}}</span>
			</view>
			<view class="bot">
				<u-icon name="account" color="#000" size="28"></u-icon>
			</view>
		</view>
		<view class="main_c">
			<view class="top">
				<p class="top_p">选择</p>
				<p>*优先</p>
			</view>
		</view>
		<view class="main_cs">
			<view class="main_cs_a">
				<p>靠窗</p>
				<view class="zuoci">
					<span :class="activeindex==index? 'active':''" v-for="(item,index) in span"
						:key="index" @click='qie(index)'>{{item}}</span>
				</view>
			</view>
		</view>
		<view class="main_d">
			<view class="main_d_d">
				<u-icon bold name="email" color="#000" size="28"></u-icon>
				<p class="mid">通知手机</p>
			</view>
			<p class="pppp">{{iphone}}</p>
		</view>
		<view class="main_e">
			<span class="left">点击立即预订表示已阅读并同意</span>
			<span class="right">火车票服务协议</span>
		</view>
		<button v-if="buttonController==1" class="main_but_a">暂时无票</button>
		<button v-if="buttonController==2" class="main_but_b">已停售</button>
		<button v-if="buttonController==3" class="main_but_c" @click="open">立即预订</button>
		<uni-popup ref="popup" type="center" :animation="false">
			<view class="pop-body">
				<view>
					<dl>
						<dt>请确认车次信息</dt>
						<dd>{{city}}-{{citytwo}} G{{ceci}}</dd>
					</dl>
					<view class="icon-calendar">
						<image src="../../static/完成的副本.png" mode=""></image>
					</view>
				</view>
				<view>
					<dl>
						<dt>出发时间</dt>
						<dd>{{date}} {{dates<10? '0'+dates:dates}}:{{datev<10? '0'+datev:datev}} 发车</dd>
					</dl>
					<view class="icon-calendar">
						<image src="../../static/完成的副本.png" mode=""></image>
					</view>
				</view>
				<view>
					<dl>
						<dt>乘车人</dt>
						<dd>{{name}}</dd>
					</dl>
					<view class="icon-calendar">
						<image src="../../static/完成的副本.png" mode=""></image>
					</view>
				</view>
				<view>
					<view class="spanmkad">
						<span>核验乘客信息成功,占座中…</span>
						<span>{{ProgressValue}}%</span>
					</view>
					<view class="">
						<u-line-progress :percentage="ProgressValue" activeColor="#00acbd" height="8"
							:showText='false'></u-line-progress>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeindex: -1,
				buttonController: 1,
				city: '北京',
				citytwo: '上海',
				date: '2023-06-15',
				ceci: '7740',
				dates: '06',
				datev: '24',
				dates1: '06',
				datev1: '24',
				ProgressValue: 1,
				span: ['A', 'B', 'C', 'E', 'F'],
				money: 67,
				hours: 12,
				minute: 10,
				currentDate: '',
				arr: '成人票',
				name: '李四',
				number: '340111********3421',
				iphone: '18810612105'
			}
		},
		methods: {
			qie(index){
			this.activeindex=index;	
			},
			//身份证信息跳转
			sfz() {
				let arrlist = {
					name: this.name,
					number: this.number,
					indexid: this.buttonController,


					//测试
					city: this.city,
					citytwo: this.citytwo,
					date: this.date,
					ceci: this.ceci,
					dates: this.dates,
					datev: this.datev,
					dates1: this.dates1,
					datev1: this.datev1,
					money: this.money,
					hours: this.hours,
					minute: this.minute,
					ceci: this.ceci
				}
				let strs = JSON.stringify(arrlist)
				let sfz = encodeURIComponent(strs)
				uni.navigateTo({
					url: '/pages/Add a list/Add a list?objs=' + sfz
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			open() {
				if(this.activeindex==-1){
					uni.showToast({
						title:'还未选座',
						icon:'error'
					})
				}else{
				let arrlistone = {
					name: this.name,
					number: this.number,
					indexid: this.buttonController,
					city: this.city,
					citytwo: this.citytwo,
					date: this.date,
					money: this.money,
					hours: this.hours,
					minute: this.minute,
					arr: this.arr,
					ceci: this.ceci,
					dates: this.dates,
					datev1: this.datev1,
					dates1: this.dates1,
					datev: this.datev
				}
				let strsone = JSON.stringify(arrlistone)
				let sfzone = encodeURIComponent(strsone)
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('top')
				let _this = this
				_this.ProgressValue = 0;
				let time = null;
				time = setInterval(() => {
					_this.ProgressValue++
					if (_this.ProgressValue >= 100) {
						_this.ProgressValue = 100
						uni.navigateTo({
							url: '/pages/pay/pay?objone=' + sfzone,
						});
						clearInterval(time)
					}
				}, 100)
				}
			},
			tiaozhuan() {
				
				uni.navigateTo({
					url: '/pages/Add a list/Add a list',
				});
			}
		},
		onLoad(type) {
			if (type.obj) {
				let newarr = decodeURIComponent(type.obj)
				let datalist = JSON.parse(newarr)
				console.log(datalist, "从query拿到orderfilling的值");
				this.city = datalist.city
				this.citytwo = datalist.citytwo
				this.date = datalist.date
				this.ceci = datalist.ceci
				this.money = datalist.money
				this.hours = datalist.hours
				this.minute = datalist.minute
				this.dates = datalist.dates
				this.datev = datalist.datev
				this.dates1 = datalist.dates1
				this.datev1 = datalist.datev1
			} else {
				let newarrs = decodeURIComponent(type.username)
				let datalists = JSON.parse(newarrs)
				this.arr = datalists.arr
				this.name = datalists.name
				this.number = datalists.number
				this.buttonController = datalists.indexid
				this.iphone = datalists.iphone
				console.log(datalists, 'datalists');
				this.ceci = datalists.orderlist.ceci
				this.city = datalists.orderlist.city
				this.citytwo = datalists.orderlist.citytwo
				this.date = datalists.orderlist.date
				this.dates = datalists.orderlist.dates
				this.datev = datalists.orderlist.datev
				this.dates1 = datalists.orderlist.dates1
				this.datev1 = datalists.orderlist.datev1
				this.money = datalists.orderlist.money
				this.hours = datalists.orderlist.hours
				this.minute = datalists.orderlist.minute
				this.ceci = datalists.orderlist.ceci

			}
		},
		mounted() {
			let zuocixinxi=uni.getStorageSync('zuociindex')
			if(zuocixinxi){
				this.buttonController=zuocixinxi
			}
		}

	}
</script>

<style lang="scss">
	.spanmkad {
		display: flex;
		justify-content: space-between;

		span:nth-child(2) {
			color: #00acbd;
		}
	}

	.icon-calendar {
		width: 15%;
		height: 100%;
		display: flex;
		align-items: center;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-top: 18rpx;
		}
	}



	.pop-body {
		width: 80vw;
		height: 40vh;
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 10vw;
		margin-top: 30vh;

		>view:nth-child(1),
		>view:nth-child(2),
		>view:nth-child(3) {
			display: flex;
			align-items: center;

			width: 100%;
			height: 20%;

			dl {
				font-weight: 800;
				width: 78%;
				margin-left: 7%;

				dt {
					font-size: 24rpx;
					color: #ccc;
					padding: 10rpx 0;
				}
			}
		}

		>view:nth-child(4) {
			width: 85%;
			margin-left: 7.5%;
			border-top: 2rpx solid #ccc;
			margin-top: 40rpx;
			padding-top: 10rpx;

			span {
				display: inline-block;
				font-size: 24rpx;
				padding: 20rpx 0;
			}
		}
	}

	.content {
		width: 100vw;
		height: 100vh;
		background-color: rgb(239, 239, 239);

		.main {
			color: white;
			width: 100vw;
			height: 28vh;
			background-color: #00acbd;

			p {
				font-size: 25rpx;
				padding: 20rpx;
			}

			.u-icon {
				padding-top: 60rpx;
				padding-left: 20rpx;
				padding-bottom: 40rpx;
			}

			.maina {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				span:nth-child(1) {
					margin-left: 30rpx;
				}

				span:nth-child(2) {
					font-size: 28rpx;
				}

				span:nth-child(3) {
					margin-right: 20rpx;
				}

				.u-icon {
					margin-left: -40rpx;
				}
			}

			.mainb {
				width: 90%;
				height: 70rpx;
				margin: 0 auto;
				margin-top: 5rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				span:nth-child(1) {
					font-size: 55rpx;
				}

				span:nth-child(3) {
					font-size: 55rpx;
					margin-right: 20rpx;
				}

				span:nth-child(2) {
					display: inline-block;
					padding: 10rpx;
					width: 120rpx;
					height: 40rpx;
					border: 4rpx solid #a9aa80;
					font-size: 28rpx;
					text-align: center;
					line-height: 40rpx;
					margin-left: 30rpx;
				}
			}

			.mainc {
				width: 90%;
				height: 70rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.maincone {
					width: 150rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
				}

				.mainT {
					height: 70rpx;

					p {
						margin-top: -16rpx;
					}
				}

				.mainctwo {
					width: 150rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
				}
			}

			.mainz {
				font-size: 30rpx;
				margin-top: -26rpx;
			}
		}

		.main_b {
			width: 100vw;
			height: 15vh;
			background-color: white;

			.top {
				display: flex;
				padding-top: 20rpx;

				.top_a {
					font-size: 35rpx;
					font-weight: 600;
					text-align: center;
					line-height: 60rpx;
					padding-top: 5rpx;
					margin-left: 20rpx;
				}

				.top_b {
					width: 100rpx;
					height: 40rpx;
					display: block;
					border: 3rpx solid #ccc;
					color: #ccc;
					text-align: center;
					line-height: 40rpx;
					margin-left: 30rpx;
					font-size: 26rpx;
					margin-top: 14rpx;
				}
			}

			.mid {
				margin-top: 5rpx;

				.mid_a {
					margin-left: 20rpx;
				}

				.mid_b {
					margin-left: 10rpx;
					font-weight: 600;
				}
			}

			.bot {
				margin-top: 8rpx;
				width: 100%;
				margin-left: 15rpx;

				.bot_img {
					width: 60rpx;
					height: 60rpx;
					margin-left: 35rpx;
				}
			}
		}

		.main_c {
			width: 100%;
			height: 10vh;
			background-color: white;
			margin-top: 20rpx;

			.top {
				width: 100%;
				height: 100%;

				p {
					padding-top: 10rpx;
					padding-left: 20rpx;
				}

				.top_p {
					font-weight: 600;
					font-size: 37rpx;
					padding-top: 20rpx;
				}
			}

			.bot {
				padding-top: 30rpx;
				margin-left: 30rpx;

			}
		}

		.main_cs {
			width: 100%;
			height: 8vh;
			background: white;
			margin-top: 20rpx;

			.main_cs_a {
				padding: 10rpx 16rpx;

				p {
					width: 32rpx;
					float: left;
				}

				>view {
					float: left;

					>span {
						display: inline-block;
						width: 40rpx;
						height: 40rpx;
						padding: 20rpx;
						background-color: #ccc;
						border-radius: 30rpx;
						margin: 4rpx 10rpx 0 10rpx;
						text-align: center;
						line-height: 40rpx;
					}

					//划过
					span:hover {
						background-color: #00acbd;
						color: #fff;
					}
					.active {
						background-color: #00acbd;
						color: #fff;
					}
				}
			}
		}

		.main_d {
			width: 100%;
			height: 8vh;
			background-color: white;
			margin-top: 20rpx;
			display: flex;
			align-items: center;

			.pppp {
				margin-left: 80rpx;
			}

			.main_d_d {
				display: flex;
				width: 32%;
				height: 100%;
				align-items: center;
				justify-content: space-around;
			}

		}

		.main_e {
			margin-top: 20rpx;

			.left {
				font-size: 28rpx;
				padding-left: 10rpx;
			}

			.right {
				color: #55aaff;
				font-size: 28rpx;
				padding-left: 10rpx;
			}
		}

		.main_but_a {
			width: 95vw;
			margin-top: 160rpx;
			border-radius: 40rpx;
			background-color: #ffd21e;
			color: #fff;
		}

		.main_but_b {
			width: 95vw;
			margin-top: 160rpx;
			border-radius: 40rpx;
			background-color: #d0d0d0;
			color: #000;
		}

		.main_but_c {
			width: 95vw;
			margin-top: 160rpx;
			border-radius: 40rpx;
			background-color: #00acbd;
			color: white;
		}
	}
</style>